<template>
  <div>
    <form action="#">
      政策类型：
      <select name="" class="PAselect" v-model="pId" v-on:change="choosePolicy()" >
        <option v-for="item in option1" :key="item.id" :value="item.id">{{item.value}}</option>
      </select>
      政策名称：<input type="text" placeholder="请输入政策名称" v-model="policyName"><br>
      政策描述：&#160;<input type="text" class="des" v-model="policyDes" placeholder="请输入政策描述"><br>
      有<i class="wenzi"></i>效<i class="wenzi"></i>期：&#160;<input type="date" v-model="policyStartDate"><i class="line"></i>一<i class="line"></i><input type="date" v-model="policyEndDate"><br>
      <div v-if="isShowDiscounts">打<i class="wenzi"></i>折<i class="wenzi"></i>率： <input type="text" placeholder="请输入打折利率" v-model="disRate"></div>
      <div v-if="isShowFullGift">买赠条件：
        购买的产品数量至少需要<i class="wenzi"></i><input type="text" style="width: 50px;" v-model="purchaseNum"><i class="wenzi"></i>件<br>
        赠送产品：
        <select name="" class="PAselect" v-model="giveId" >
          <option v-for="item in options" :key="item.productId" :value="item.productId">{{item.productName}}</option>
        </select>
        赠送数量：<input type="text" placeholder="请输入数量" v-model="giveNum"></div>
    </form>
    <p>活动产品（可选择任一产品录入政策）：</p>
    <div class="btn">
      <el-button @click="dialogFormVisible = true">添加</el-button>
      <el-button @click="deleteData()">删除</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 90%;margin: 20px auto; "
      :header-cell-style="headerStyle"
      :cell-style="isCenter">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="120"
        v-model="tableId">
      </el-table-column>
      <el-table-column
        prop="productCode"
        label="产品编码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="产品类型"
        width="120"><!--show-overflow-tooltip 当内容过长时 显示tooltip-->
      </el-table-column>
      <el-table-column
        prop="scfcName"
        label="产品规格"
        width="120">
      </el-table-column>
      <el-table-column
        prop="productRepertory"
        label="产品库存"
        width="120">
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="policy"-->
      <!--label="政策优惠"-->
      <!--width="120">-->
      <!--</el-table-column>-->
    </el-table>
    <div class="btn">
      <el-button @click="savePolicy()">保存</el-button>
    </div>

    <!-- 模态框 -->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-form-item label="产品编码" :label-width="formLabelWidth">
          <!--<select placeholder="请选择" v-model="productId" v-on:change="chooseProduct">-->
          <!--<option v-for="item in options" :key="item.productId">{{item.productCode}}</option>-->
          <!--</select>-->
          <el-select v-model="productId" placeholder="请选择" v-on:change="chooseProduct()">
            <el-option
              v-for="item in options"
              :key="item.productId"
              :label="item.productId"
              :value="item.productId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="form.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" :label-width="formLabelWidth">
          <el-input v-model="form.categoryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品规格" :label-width="formLabelWidth">
          <el-input v-model="form.scfcName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品库存" :label-width="formLabelWidth">
          <el-input v-model="form.productRepertory" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="addData()">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'policyAdd',
  data () {
    return {
      option1: [ { id: 1, value: '折扣' }, { id: 2, value: '买赠' } ],
      options: [],
      id: '',
      pId: '',
      policyDes: '',
      policyStartDate: '',
      policyEndDate: '',
      policyName: '',
      productId: '',
      proId: '',
      // tableData: [],
      tableData: [],
      deleteId: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        productName: '',
        categoryName: '',
        scfcName: '',
        productRepertory: '',
        policy: ''
      },
      formLabelWidth: '150px',
      policyArr: [],
      userId: '',
      disRate: '',
      purchaseNum: '',
      giveId: '',
      giveNum: '',
      isShowDiscounts: false,
      isShowFullGift: false,
      tableId: ''
    }
  },
  mounted () {
    this.$axios.post('product/queryProductInfo', { page: 1, limit: 20, token: '1' }, { headers: { 'Content-Type': 'application/json' } }).then((response) => {
      window.console.log(response)
      this.options = response.data.data
    }).catch(function (error) {
      window.console.log(error)
    })
  },
  methods: {
    zhuan: function (string) {
      var newDate = new Date()
      var yearNum = Number(string.substr(0, 4))
      var monthNum = Number(string.substr(5, 2)) - 1
      var dayNum = Number(string.substr(8, 2))
      var hourNum = Number(string.substr(10, 2))
      var minuteNum = Number(string.substr(13, 2))
      var secondNum = Number(string.substr(16, 2))
      newDate.setFullYear(yearNum)
      newDate.setMonth(monthNum)
      newDate.setDate(dayNum)
      newDate.setHours(hourNum)
      newDate.setMinutes(minuteNum)
      newDate.setSeconds(secondNum)
      return newDate
    },
    headerStyle () {
      return 'text-align:center'
    },
    isCenter () {
      return 'text-align:center'
    },
    deleteData: function () {
      var selectData = this.$refs.multipleTable.selection
      // window.console.log(selectData);
      for (var a = 0; a < selectData.length; a++) {
        // window.console.log(selectData[a].id)
        // window.console.log(selectData[a].productCode)
        this.deleteId.push(selectData[a].id)
      }
      // window.console.log(this.tableData)
      window.console.log(this.deleteId)
      for (var i = 0; i < this.tableData.length; i++) {
        for (var j = 0; j < this.deleteId.length; j++) {
          if (this.tableData[i].id === this.deleteId[j]) {
            this.tableData.splice(i, 1)
          }
        }
      }
      window.console.log(this.id)
    },
    chooseProduct: function () {
      // window.console.log(this.productId)
      this.$axios.post('product/queryProductInfo', { page: 1, limit: 20, token: '1' }, { headers: { 'Content-Type': 'application/json' } }).then((response) => {
        // window.console.log(response.data.data)
        for (var i = 0; i < response.data.data.length; i++) {
          if (this.productId === response.data.data[i].productId) {
            this.form.productName = response.data.data[i].productName
            this.form.categoryName = response.data.data[i].categoryName
            this.form.scfcName = response.data.data[i].scfcName
            this.form.productRepertory = response.data.data[i].productRepertory
          }
        }
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    choosePolicy: function () {
      this.id = this.pId
      if (this.pId === 1) {
        this.isShowDiscounts = true
        this.isShowFullGift = false
      } else if (this.pId === 2) {
        this.isShowFullGift = true
        this.isShowDiscounts = false
      } else {
        this.isShowDiscounts = false
        this.isShowFullGift = false
      }
    },
    addData: function () {
      this.tableId = this.tableData.length + 1
      if (this.productId.toString().trim() !== 0) {
        var obj = { id: this.tableId, productCode: this.productId, productName: this.form.productName, categoryName: this.form.categoryName, scfcName: this.form.scfcName, productRepertory: this.form.productRepertory }
        // this.id=this.tableData.length+1
        this.tableData.push(obj)
        // window.console.log(obj)
        this.proId = this.productId
        this.productId = ''
        this.form = { productName: '', categoryName: '', scfcName: '', productRepertory: '' }
        this.dialogFormVisible = false
      } else {
        this.$message({
          message: '信息不能为空',
          type: 'warning'
        })
      }
    },
    savePolicy: function () {
      window.console.log(this.id)
      var policyId = this.id

      var proid = this.proId
      var name = this.policyName
      var policyDescript = this.policyDes
      var date1 = new Date(this.policyStartDate).getTime()
      var date2 = new Date(this.policyEndDate).getTime()
      var rate = Number(this.disRate)
      var purNum = Number(this.purchaseNum)
      var gId = this.giveId.toString()
      var gNum = Number(this.giveNum)
      var zDate1 = date1.toString()
      var zDate2 = date2.toString()

      if (this.id === 1) { // //添加打折政策
        if (policyId.toString().trim() !== 0 && name.trim() !== 0 && policyDescript.trim() !== 0 && this.policyStartDate.trim() !== 0 && this.policyEndDate.trim() !== 0 && proid.toString().trim() !== 0 && date1 < date2 && rate.toString().trim() !== 0) {
          var data1 = {
            'activitiesName': this.policyName,
            'describe': this.policyDes,
            'startDate1': date1,
            'endDate1': date2,
            'discountsRate': rate,
            'productId': this.proId,
            'userId': 2
          }
          var param1 = this.$qs.stringify(data1)
          this.$axios.post('addDiscounts', param1, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
            window.console.log(response)
            if (response.data.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            }
          }).catch(function (error) {
            window.console.log(error)
          })
        } else {
          this.$message({
            message: '信息不能为空或日期错误',
            type: 'warning'
          })
        }
      } else if (this.id === 2) { // //添加满赠政策
        if (policyId.toString().trim() !== 0 && name.trim() !== 0 && policyDescript.trim() !== 0 && this.policyStartDate.trim() !== 0 && this.policyEndDate.trim() !== 0 && proid.toString().trim() !== 0 && date1 < date2 && purNum.toString().trim() !== 0 && gId.trim() !== 0 && gNum.toString().trim() !== 0) {
          var data2 = {
            'activitiesName': this.policyName,
            'activitiesDescribe': this.policyDes,
            'startDate1': zDate1,
            'endDate1': zDate2,
            'productId': proid,
            'productNumberReached': purNum,
            'giveProductId': gId,
            'giveProductsNumber': gNum,
            'userId': 2
          }
          // window.console.log(proid)
          var param2 = this.$qs.stringify(data2)
          window.console.log(typeof zDate1)
          window.console.log(zDate1)
          this.$axios.post('addFullGift', param2, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
            window.console.log(response)
            if (response.data.code === '200') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            }
          }).catch(function (error) {
            window.console.log(error)
          })
        } else {
          this.$message({
            message: '信息不能为空或日期错误',
            type: 'warning'
          })
        }
      } else if (this.id === '') {
        this.$message({
          message: '信息不能为空',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
  form, p{
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
  p{
    margin-bottom: 20px;
  }
  .PAselect{
    height: 30px;
    width: 100px;
    margin-right: 206px;
  }
  input{
    height: 25px;
    width: 145px;
    margin-bottom: 20px;
  }
  .des{
    width: 45%;
  }
  .wenzi{
    padding: 4px;
  }
  .line{
    padding: 10px;
  }
  .el-form-item .el-input{
    width: 300px;
  }
  .el-dialog--center .el-dialog__body{
    padding: 25px 25px 10px;
  }
  .el-dialog--center .el-select{
    width: 120px;
    height: 25px;
  }
  .btn{
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
</style>
